<template>	
	<div id="box">
		<el-form :model="addFrom" :rules="rules" ref="child" label-width="160px">
		<el-row :gutter="20">
  		<el-col :span="12">
  		<el-form-item label="姓名" prop="name" style='width:460px' >
		<el-input v-model="addFrom.name"></el-input>
		</el-form-item>
		<br>
		<el-form-item label="性别" prop="sex" style='width:460px' >
		<el-radio-group v-model="addFrom.sex">
		<el-radio border label="男"></el-radio>
		<el-radio border label="女"></el-radio>
		</el-radio-group>
		</el-form-item>
		<br>
		<el-form-item label="员工编号" prop="number" style='width:460px' >
		<el-input v-model="addFrom.number"></el-input>
		</el-form-item>
		<br>
		<el-form-item label="登录密码" prop="password" style='width:460px' >
		<el-input v-model="addFrom.password"></el-input>
		</el-form-item>
		<br>
		<el-form-item label="基本工资" prop="base_salary" style='width:460px' >
		<el-input v-model="addFrom.base_salary"></el-input>
		</el-form-item>		
  		</el-col>
  		<el-col :span="12">
  		<el-form-item label="联系电话" prop="tel" style='width:460px' >
		<el-input v-model="addFrom.tel"></el-input>
		</el-form-item>
  		<el-form-item label="身份证" prop="id_card" style='width:460px' >
		<el-input v-model="addFrom.id_card"></el-input>
		</el-form-item>
		<el-form-item label="部门" prop="store_name" style='width:460px' >
		<el-select v-model="addFrom.store_name" placeholder="选择部门">
		<el-option v-for='(item,index) in storeSelect' :label="item" :value="item" :key='index'></el-option>
		</el-select>
		</el-form-item>
		<el-form-item label="职位" prop="job_name" style='width:460px' >
		<el-select v-model="addFrom.job_name" placeholder="选择职位">
		<el-option v-for='(item,index) in job' :label="item" :value="item" :key='index'></el-option>
		</el-select>
		</el-form-item>
		<el-form-item label="权限级别" prop="role_name" style='width:460px' >
		<el-select v-model="addFrom.role_name" placeholder="选择职位">
		<el-option v-for='(item,index) in roleSelect' :label="item" :value="item" :key='index'></el-option>
		</el-select>
		</el-form-item>
  		</el-col>
		</el-row>
		<el-form-item>
		<el-button type="primary" @click="submitForm('child')">确认添加</el-button>
		<el-button @click="resetForm('child')">重置</el-button>
		</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import reg from '@/tool/reg'
	import {mapGetters,mapActions} from 'vuex'
	export default{
		name:'addyg',
		data(){
			return{
				addFrom:{},
				rules:{
					name:[
						{ required: true, message: '姓名必填!', trigger: 'blur' },
					],
					id_card:[
						{required: true,validator:reg.id_card,trigger:'blur'}
					],
					number:[
						{ required: true, message: '编号必填!', trigger: 'blur' },
					],
					password:[
						{ required: true, message: '密码必填!', trigger: 'blur' },
					],
					tel:[
						{required: true,validator:reg.phone,trigger:'blur'}
					],
					sex:[
						{ required: true, message: '性别必选!', trigger: 'blur' },
					],
					store_name:[
						{ required: true, message: '请选择部门!', trigger: 'blur' },
					],
					job_name:[
						{ required: true, message: '请选择职务!', trigger: 'blur' },
					],
					role_name:[
						{ required: true, message: '请选择权限等级!', trigger: 'blur' },
					],
					base_salary:[{required: true, message: '基础工资不能为空!', trigger: 'blur'}]
				},
			}
		},
		watch:{
			addFrom(){
				// console.log(this.addFrom)
			}
		},
		methods:{
			...mapActions(['addyg','actGetygData']),
			submitForm(formName) {
        		this.$refs[formName].validate((valid) => {
        			// console.log(valid)
          			if (valid) {
          				// console.log(this.addFrom.sex)
          				this.addFrom.create_by = sessionStorage.getItem('name')
          				if(this.addFrom.sex=='男'){
          					this.addFrom.sex = 1
          				}else if(this.addFrom.sex == '女'){
          					this.addFrom.sex = 2
          				}
          				// console.log(this.addFrom.sex)
          				this.role.filter(item=>{
          					if(item.name == this.addFrom.role_name){
          						this.addFrom.per_id = item.permission_id
          						// console.log(this.addFrom.per_id)
          					}
          				})
          				// console.log(this.addFrom)
          				this.addyg(this.addFrom).then(res=>{
          					if(res==='200'){
								this.$message({
									showClose: true,
									message: '添加成功!',
									type: 'success'
								});
								this.log('添加一名员工数据')
								this.actGetygData()
          					}
          				})
          			} else {
            			console.log('error submit!!');
            			return false;
          			}
        		});
      		},
      		resetForm(formName) {
      			this.addFrom = {}
        		this.$refs[formName].resetFields();
      		}
		},
		computed:{
			...mapGetters(['jobSelect','roleSelect','storeSelect','role']),
			job(){
				let arr = []
				this.jobSelect.filter(item=>{
					if(item.store_name === this.addFrom.store_name){
						arr.push(item.name)
					}
				})
				return arr
			}
		}
	}
</script>